<template>
  <view>
    <view class="select-box" @tap="handleToSelectRegion()">
        <view class="select-left">请选择地区 {{province}} {{city}} {{region}}</view>
		<view class="select-right" @tap.stop="handleToConfirm()">确定</view>
    </view>
	<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
		<view class="select-left">请选择地区 {{province}} {{city}} {{region}}</view>
		<view class="select-right" @tap.stop="handleToConfirm()">确定</view>
		<picker-view  indicator-class="indicator-class"  :value="selectValueIndex" @change="bindChange" class="picker-view">
    		 
    		 <picker-view-column>
    			 <view class="item" v-for="(item,index) in provinceOptions" :key="index">{{item.region_name}}</view>
    		 </picker-view-column>
    		 <picker-view-column>
    			 <view class="item" v-for="(item,index) in cityOptions" :key="index">{{item.region_name}}</view>
    		 </picker-view-column>
    		 <picker-view-column>
    			 <view class="item" v-for="(item,index) in regionOptions" :key="index">{{item.region_name}}</view>
    		 </picker-view-column>
		</picker-view>
	</uni-popup>
  </view>
</template>
<script>
  import {getTreeRegions} from '@/api/system/region/region'
  export default
  {
    // 组件名称
    name: 'yh-select-region',
    // 组件
    components:
      {
      },
    props:
      {
		  regionIdArray:{
			  type:Array,
			  default:function()
			  {
				  return []
			  }
		  }
      },
    // 数据
    data()
      {
        return {
          //选择的省
          province:'',
          //选择的市
          city:'',
          //选择的地区
          region:'',
          //省的选项
          provinceOptions:[],
          
          //
          visible:false,
          //选择下标集合
          selectValueIndex:[0,0,0],
          //转换省下标
          provinceIndex:0,
          //转换城市下标
          cityIndex:0,
          //转换地区下标
          regionIndex:0,
          indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
          // #ifdef MP-KUAISHOU
          maskStyle: "padding:10px 0"
          // #endif
          // #ifndef MP-KUAISHOU
          maskStyle: ""
          // #endif
        }
      },
    // 计算属性
    computed:
      {
		  //市的选项
		  cityOptions:function()
		  {
		  	let options = []
			
			/* console.log(this.provinceOptions)
			console.log(this.provinceIndex) */
			
		  	if(this.provinceOptions.length > 0 &&  this.provinceOptions[this.provinceIndex] !=='undefined' )
		  	{
		  		options = this.provinceOptions[this.provinceIndex].children
		  	}
		  	
		  	return options
		  },
		  //地区的选项
		  regionOptions:function()
		  {
		  	let options = []
		  	
		  	if(this.cityOptions.length > 0 && this.cityOptions[this.cityIndex] !=='undefined')
		  	{
		  		options = this.cityOptions[this.cityIndex].children
		  	}
		  	
		  	return options;
		  	
		  },
		  selectRegionId:function()
		  {
		  	let options = [0,0,0]
		  	
		  	options[0] = this.provinceOptions[this.provinceIndex].id
		  	options[1] = this.cityOptions[this.cityIndex].id
		  	options[2] = this.regionOptions[this.regionIndex].id
		  	
		  	//console.log(options)
		  	
			this.province = this.provinceOptions[this.provinceIndex].region_name
			this.city = this.cityOptions[this.cityIndex].region_name
			this.region = this.regionOptions[this.regionIndex].region_name
			
		  	return options
		  }
      },
    // 监听
    watch:
      {
		  provinceIndex:{
		  	handler(oldValue,newValue)
		  	{
		  		this.cityIndex = 0
		  		this.regionIndex = 0
		  		this.selectValueIndex[1] = 0
		  		this.selectValueIndex[2] = 0
		  	},
		  	deep:true,
		  	immediate:true
		  }
      },
    // 实例创建之前
    beforeCreate()
      {
      },
    // 创建
    created()
      {
      },
    // 挂载之前
    beforeMount()
      {
      },
    // 挂载 --常用
    mounted()
      {
		  this.getTreeRegions()
      },
    // 更新之前
    beforeUpdate()
      {
      },
    // 跟新后
    updated()
      {
      },
    // 销毁之前
    beforeDestroy()
      {
      },
    // 销毁后
    destroyed()
      {
      },
    // 方法
    methods:
    {
		async getTreeRegions()
		{
			const treeRegions = await getTreeRegions().then(res =>
			{
				//console.log(res)
				
				if(res && res.code === 0)
				{
					return res.data
				}
			})
			
			this.provinceOptions = treeRegions
		},
		//是否显示
		handleToSelectRegion()
		{
			//this.visible = true
			//console.log(this.visible)
			 this.$refs.popup.open('bottom')
		},
		//绑定值的变化
		bindChange (e) {
			//console.log(e)
		    const val = e.detail.value
		   //console.log(val)
		   this.selectValueIndex = val
		   this.provinceIndex = this.selectValueIndex[0]
		   this.cityIndex = this.selectValueIndex[1]
		   this.regionIndex = this.selectValueIndex[2]
		   
		},
		handleToConfirm()
		{
			this.visible = false
			// console.log(this.selectRegionId)
			// console.log(this.visible) 
			this.$emit('update:regionIdArray',this.selectRegionId)
		}
    }
  }
</script>
<style lang='scss' scoped>
	.select-box{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		
		.select-left{
			margin-left: 10rpx;
		}
		.select-right{
			margin-right: 10rpx;
		}
	}
	/deep/ picker-view {
			width: 100%;
			height: 600rpx;
			margin-top:50rpx;
		}
	
	/deep/ .item {
	    line-height: 100rpx;
	    text-align: center;
	}
	
</style>